<template>
  <Layout class="p-5 bg-white">
    <Form
      :label-width="155"
      :rules="ruleValidate"
      ref="addResource.student"
      :model="addResource.student"
    >
      <Row>
        <Col span="8" push="3">
          <FormItem class="w-75" label="姓名" prop="name">
            <Input
              v-model="addResource.student.name"
              placeholder="请输入姓名"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="手机号" prop="tel">
            <Input
              v-model="addResource.student.tel"
              placeholder="请输入手机号"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="线索来源">
            <Select
              v-model="addResource.resource.source"
              placeholder="请输入线索来源"
              filterable
              clearable
            >
              <Option v-for="item in orsourceList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem class="w-75" label="应聘职位">
            <Input
              v-model="addResource.resource.ypzw"
              placeholder="请输入应聘职位"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="从事过的工作">
            <Input
              v-model="addResource.resource.csgz"
              placeholder="请输入从事过的工作"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="投递公司名称">
            <Input
              v-model="addResource.resource.tdgsmc"
              placeholder="请输入投递公司名称"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="身份证ID">
            <Input
              v-model="addResource.student.secId"
              placeholder="请输入身份证ID"
            ></Input>
          </FormItem>

          <FormItem class="w-75" label="身份证正面">
            <!-- 文件上传 身份证正面-->
            <div v-if="addResource.student.secFrontUrl != null">
              <img
                :src="
                  addResource.student.secBackUrl
                "
                style="width:180px;height:100px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemove"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              :show-upload-list="false"
              name="file"
              ref="upload"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>

          <FormItem class="w-75" label="身份证反面">
            <!-- 身份证反面 -->
            <div v-if="addResource.student.secBackUrl != null">
              <img
                :src="
                  addResource.student.secBackUrl
                "
                style="width:180px;height:100px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemoveBack"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              name="file"
              :show-upload-list="false"
              ref="back"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUploadBack"
              :on-success="handleSuccessBack"
              :on-remove="handleRemoveBack"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>
          <FormItem class="w-75" label="身份证手持">
            <!-- 身份证手持 -->
            <div v-if="addResource.student.secHandleUrl != null">
              <img
                :src="
                  addResource.student.secHandleUrl
                "
                style="width:180px;height:100px"
              />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemoveHand"
                ></Icon>
              </div>
            </div>
            <Upload
              with-credentials
              :max-size="2048"
              :show-upload-list="false"
              name="file"
              ref="hand"
              :format="['jpg', 'jpeg', 'png']"
              :data="{ module: 'idcard', date: new Date() }"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUploadHand"
              :on-success="handleSuccessHand"
              :on-remove="handleRemoveHand"
              :action="url"
            >
              <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                >Upload files</Button
              >
            </Upload>
            <!-- -->
          </FormItem>
          <FormItem class="w-75" label="银行账户">
            <Input
              v-model="addResource.student.account"
              placeholder="请输入银行账户"
            ></Input>
          </FormItem>
        </Col>
        <Col span="8" push="3">
          <FormItem class="w-75" label="银行预留电话">
            <Input
              v-model="addResource.student.accountTel"
              placeholder="请输入银行预留电话"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="联系地址">
            <Input
              v-model="addResource.student.address"
              placeholder="请输入联系地址"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="邮件">
            <Input
              v-model="addResource.student.email"
              placeholder="请输入邮件"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="学历">
            <Input
              v-model="addResource.student.degree"
              placeholder="请输入学历"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="专业">
            <Input
              v-model="addResource.student.major"
              placeholder="请输入专业"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="毕业院校">
            <Input
              v-model="addResource.student.graduate"
              placeholder="请输入毕业院校"
            ></Input>
          </FormItem>
          <FormItem class="w-75" label="生日">
            <Date-picker
              type="datetime"
              @on-change="birth"
              placeholder="请输入生日"
              class="w-100"
            ></Date-picker>
          </FormItem>
          <FormItem class="w-75" label="毕业时间">
            <Date-picker
              class="w-100"
              type="datetime"
              @on-change="graduateTime"
              placeholder="请输入毕业时间"
            ></Date-picker>
          </FormItem>
          <FormItem class="w-75" label="资料备注">
            <Input
              v-model="addResource.resourceRecord.comment"
              placeholder="请输入资料备注"
            ></Input>
          </FormItem>

          <FormItem class="w-75" label="上传的文件或图片路径">
            <Input
              v-model="addResource.resourceRecord.content"
              placeholder="请输入上传的文件或图片路径"
            ></Input>
          </FormItem>

          <FormItem class="w-75" label="备注">
            <Input
              v-model="addResource.resource.bz"
              placeholder="请输入备注"
            ></Input>
          </FormItem>
          <FormItem class="text-right">
            <Button v-preventReClick @click="submit" type="primary"
              >提交</Button
            >
            <Button @click="cancel" class="ml-2">取消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <!-- 加载环 -->
    <Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>

<script>
import store from '../../common/store.js'
export default {
  data() {
    return {
      url: '',
      iport: '',
      isSpinShow: false,
      uploadListFront: [], //身份证正面
      uploadlistBack: [], //身份证反面
      uploadHand: [], //手持身份证

      ruleValidate: {
        name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
        tel: [
          {
            required: true,
            message: '电话号码不能为空',
            trigger: 'blur',
            whitespace: true,
          },
        ],
      },
      allPermissions: [],
      addResource: {
        resource: {
          source: '',
          ypzw: '',
          csgz: '',
          tdgsmc: '',
          bz: '',
          cu: '',
        },
        student: {
          name: '',
          secId: '',
          secFrontUrl: null,
          secBackUrl: null,
          secHandleUrl: null,
          tel: '',
          account: '',
          accountTel: '',
          address: '',
          email: '',
          degree: '',
          major: '',
          graduate: '',
          birth: null,
          graduateTime: null,
        },
        resourceRecord: {
          comment: '',
          content: '',
        },
      },
      User: {},
      orsourceList: [
        { value: '58同城', label: '58同城' },
        { value: '智联招聘', label: '智联招聘' },
        { value: '前程无忧', label: '前程无忧' },
        { value: 'boss直聘', label: 'boss直聘' },
        { value: '拉勾网', label: '拉勾网' },
        { value: '51job', label: '51job' },
        { value: '其他', label: '其他' },
      ],
    }
  },
  created: function() {
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    this.User = currentUser
    this.iport = this.$store.state.iport
    this.url = this.iport + 'oss/file/upload'
  },
  destroyed: function() {
    this.$router.push({
      name: 'publicSea',
    })
  },
  methods: {
    //图片上传时文件格式错误方法
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' +
          file.name +
          ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
      })
    },
    //校验图片的大小，不能大于2M
    handleMaxSize: function(file) {
      this.$Modal.info({
        title: '超出文件大小限制',
        content: '文件 ' + file.name + ' 太大，不能超过 2M。',
      })
    },

    handleRemove(file) {
      // 从 upload 实例删除数据 正面
      this.addResource.student.secFrontUrl = null
    },
    handleRemoveBack(file) {
      // 从 upload 实例删除数据 反面
      this.addResource.student.secBackUrl = null
    },
    handleRemoveHand(file) {
      // 从 upload 实例删除数据 手持
      this.addResource.student.secHandleUrl = null
    },

    //上传成功后的勾子 正面
    handleSuccess: function(response, file, fileList) {
		console.log(file)
      this.addResource.student.secFrontUrl = response.DATA.URL
    },
    //上传成功后的勾子 反面
    handleSuccessBack: function(response, file, fileList) {
      this.addResource.student.secBackUrl = response.DATA.URL
    },
    //上传成功后的勾子 反面
    handleSuccessHand: function(response, file, fileList) {
      this.addResource.student.secHandleUrl = response.DATA.URL
    },

    birth(change) {
      this.addResource.student.birth = change
    },
    graduateTime(change) {
      this.addResource.student.graduateTime = change
    },
    submit: function() {
      if (this.$data.addResource.student.name.trim().length === 0) {
        this.message.error('账户名必须输入')
        return
      }
      if (this.$data.addResource.student.name.indexOf(' ') > -1) {
        this.message.error('账户名中不能有空格')
        return
      }
      if (this.$data.addResource.student.tel.trim().length === 0) {
        this.message.error('电话号必须输入')
        return
      }
      if (this.$data.addResource.student.tel.indexOf(' ') > -1) {
        this.message.error('电话号码中不能有空格')
        return
      }
      let self = this
      let param = {
        'resource.source': this.$data.addResource.resource.source,
        'resource.ypzw': this.$data.addResource.resource.ypzw,
        'resource.csgz': this.$data.addResource.resource.csgz,
        'resource.tdgsmc': this.$data.addResource.resource.tdgsmc,
        'resource.bz': this.$data.addResource.resource.bz,
        'resource.cu': this.$data.User.user.userId,
        'student.name': this.$data.addResource.student.name,
        'student.tel': this.$data.addResource.student.tel,
        'student.secId': this.$data.addResource.student.secId,
        'student.secFrontUrl': this.$data.addResource.student.secFrontUrl,
        'student.secBackUrl': this.$data.addResource.student.secBackUrl,
        'student.secHandleUrl': this.$data.addResource.student.secHandleUrl,
        'student.account': this.$data.addResource.student.account,
        'student.accountTel': this.$data.addResource.student.accountTel,
        'student.address': this.$data.addResource.student.address,
        'student.email': this.$data.addResource.student.email,
        'student.degree': this.$data.addResource.student.degree,
        'student.major': this.$data.addResource.student.major,
        'student.graduate': this.$data.addResource.student.graduate,
        'student.birth': this.$data.addResource.student.birth,
        'student.graduateTime': this.$data.addResource.student.graduateTime,
        'student.cu': this.$data.User.user.userId,
        'resourceRecord.content': this.$data.addResource.resourceRecord.content,
        'resourceRecord.comment': this.$data.addResource.resourceRecord.comment,
        'resourceRecord.cu': this.$data.User.user.userId,
        date: new Date(),
      }
      this.isSpinShow = true
      this.http
        .post({
          url: '/resource',
          param: param,
        })
        .then((data) => {
          this.isSpinShow = false
          self.message.info('新增成功')
          this.$tabs.close({ to: '/publicSea' })
        })
    },
    cancel: function() {
      this.$tabs.close({ to: '/resource' })
    },
  },
}
</script>

<style scoped>
/* 旋转效果 */
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 遮罩 */
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
.ivu-spin-fix {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.8);
}</style
>>
